/*==================== 基础样式重置 ====================*/
/* 重置所有元素的盒模型 */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* 设置页面滚动行为为平滑 */
html {
  scroll-behavior: smooth;
}

/* 基础body样式 */
body {
  margin: 0 0 var(--header-height) 0;  /* 底部留出导航栏高度 */
  font-family: var(--body-font);        /* 使用定义的字体 */
  font-size: var(--normal-font-size);   /* 使用定义的字体大小 */
  background-color: var(--body-color);  /* 使用定义的背景色 */
  color: var(--text-color);             /* 使用定义的文字颜色 */
}

/* 标题文字样式 */
h1,
h2,
h3,
h4 {
  color: var(--title-color);            /* 使用定义的标题颜色 */
  font-weight: var(--font-semi-bold);   /* 使用定义的字体粗细 */
}

/* 移除列表默认样式 */
ul {
  list-style: none;
}

/* 移除链接下划线 */
a {
  text-decoration: none;
}

/* 图片最大宽度100%，保持比例 */
img {
  max-width: 100%;
  height: auto;
}

/*==================== 布局容器样式 ====================*/
/* 主容器样式 */
.container {
  max-width: 900px;                     /* 最大宽度 */
  margin-left: var(--mb-1-5);           /* 左侧外边距 */
  margin-right: var(--mb-1-5);          /* 右侧外边距 */

  /* 小屏幕适配 */
  @include max-screen(350px) {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }

  /* 大屏幕适配 */
  @include min-screen(768px) {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 网格布局 */
.grid {
  display: grid;
  gap: 1.5rem;                          /* 网格间距 */
}

/*==================== 头部样式 ====================*/
/* 头部导航栏样式 */
.header {
  width: 100%;
  position: fixed;                      /* 固定定位 */
  bottom: 0;                           /* 底部固定 */
  left: 0;
  z-index: var(--z-fixed);             /* 使用定义的层级 */
  background-color: var(--body-color);  /* 使用定义的背景色 */

  /* 大屏幕适配 */
  @include min-screen(768px) {
    top: 0;                            /* 顶部固定 */
    bottom: initial;
    padding: 0 1rem;
  }

  /* 超大屏幕适配 */
  @include min-screen(1024px) {
    padding: 0;
  }
}

/*==================== 区块样式 ====================*/
/* 内容区块样式 */
.section {
  padding: 2rem 0 4rem;                /* 上下内边距 */
  
  /* 大屏幕适配 */
  @include min-screen(768px) {
    padding: 6rem 0 2rem;
  }

  /* 区块标题样式 */
  &__title {
    font-size: var(--h3-font-size);     /* 使用定义的标题大小 */
    color: var(--title-color);          /* 使用定义的标题颜色 */
    font-weight: var(--font-medium);    /* 使用定义的字体粗细 */
    text-align: center;                 /* 居中对齐 */
    margin-bottom: var(--mb-0-5);       /* 底部外边距 */
  }

  /* 区块副标题样式 */
  &__subtitle {
    display: block;
    font-size: var(--small-font-size);  /* 使用定义的小字体大小 */
    margin-bottom: var(--mb-3);         /* 底部外边距 */
    text-align: center;                 /* 居中对齐 */
  }
}

/* 主要内容区域样式 */
.main {
  /* 大屏幕适配 */
  @include min-screen(768px) {
    padding: 0 1rem;
  }
  
  /* 超大屏幕适配 */
  @include min-screen(1024px) {
    padding: 0;
  }
}

/*==================== 按钮样式 ====================*/
/* 基础按钮样式 */
.button {
  display: inline-block;
  background-color: var(--first-color);  /* 使用定义的主色调 */
  color: #FFFF;
  padding: 1rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);       /* 使用定义的字体粗细 */

  /* 悬停效果 */
  &:hover {
    background-color: var(--first-color-alt);  /* 使用定义的替代色 */
  }

  /* 按钮图标样式 */
  &__icon {
    font-size: 1.2rem;
    margin-left: var(--mb-0-5);
    transition: .3s;
  }

  /* 弹性布局按钮 */
  &--flex {
    display: inline-flex;
    align-items: center;
    transition: .3s;
  }

  /* 小按钮样式 */
  &--small {
    padding: .75rem 1rem;
  }

  /* 链接式按钮样式 */
  &--link {
    padding: 0;
    background-color: transparent;
    color: var(--first-color);          /* 使用定义的主色调 */
    
    /* 悬停效果 */
    &:hover {
      background-color: transparent;
      color: var(--first-color-alt);    /* 使用定义的替代色 */
    }
  }
}